import { useFaceApi } from '@renderer/hooks/useFaceApi'
import { Button, message } from 'antd'
import styles from './index.module.scss'
import { useEffect } from 'react'

function contextMenuEvent() {
  window.api.contextMenu()
}

function FaceDetive() {
  const { container, stop, start } = useFaceApi(400, 300)
  const [messageApi, contextHolder] = message.useMessage()

  useEffect(() => {
    window.addEventListener('contextmenu', contextMenuEvent)
    return () => {
      window.removeEventListener('contextmenu', contextMenuEvent)
    }
  }, [])
  function handleStart() {
    // console.log('start')
    messageApi.success('start')
    start()
  }
  function handleStop() {
    // console.log('stop')
    message.success('stop')
    stop()
  }
  return (
    <>
      <main className={styles.root}>
        <div className="btn">
          {contextHolder}
          <Button type="primary" onClick={handleStart}>
            开始
          </Button>
          <Button danger type="primary" onClick={handleStop}>
            停止
          </Button>
        </div>
        <div className="container-outer">
          <div ref={container} className="container-inner"></div>
        </div>
      </main>
    </>
  )
}
export default FaceDetive
